import React, { Component } from 'react'

class Index extends Component {

    constructor(props) {
        super(props)
        this.createBtn = this.createBtn.bind(this)
        this.scrollTo = this.scrollTo.bind(this)
    }

    scrollTo(className) {
        let questionEle = document.getElementsByClassName(className)
        if (questionEle.length > 0) {
            questionEle[0].scrollIntoView({
                behavior: 'smooth'
            })
        }
    }

    createBtn(data, index) {
        const { questionId, questionNumber, type, key } = data
        const baseStyle = {
            width: '40px',
            height: '40px',
            borderRadius: '8px',
            margin: '8px auto',
            border: '1PX #e0e0e0 solid',
            textAlign: 'center',
            lineHeight: '40px',
            borderColor: '#e0e0e0',
            color: 'black'
        }
        const selectedStyle = {
            ...baseStyle,
            borderColor: '#1890ff',
            color: '#1890ff'
        }
        const trueStyle = {
            ...baseStyle,
            borderColor: '#52c41a',
            color: '#52c41a'
        }
        const errorStyle = {
            ...baseStyle,
            borderColor: '#f5222d',
            color: '#f5222d'
        }
        switch (type) {
            case 'selected': {
                return <div
                    style={selectedStyle} key={key || questionId || index}
                    onClick={() => this.scrollTo(`Q${questionId}`)}>{questionNumber || questionId}</div>
            }
            case 'true': {
                return <div
                    style={trueStyle} key={key || questionId || index}
                    onClick={() => this.scrollTo(`Q${questionId}`)}>{questionNumber || questionId}</div>
            }
            case 'error': {
                return <div
                    style={errorStyle} key={key || questionId || index}
                    onClick={() => this.scrollTo(`Q${questionId}`)}>{questionNumber || questionId}</div>
            }
            default: {
                return <div
                    style={baseStyle} key={key || questionId || index}
                    onClick={() => this.scrollTo(`Q${questionId}`)}>{questionNumber || questionId}</div>
            }
        }
    }

    render() {
        return <div className='answer-sheet' style={{
            boxSizing: 'border-box',
            width: '60px',
            height: '100%',
            overflowY: 'auto',
            padding: '8px',
            border: '1px #cdcdcd solid',
            backgroundColor: '#fff',
            display: 'inline-block',

        }}>
            {this.props?.dataSource?.map?.((data, index) => {
                return this.createBtn(data, index)
            })}
        </div>
    }
}

export default Index
